import React from 'react'
import { connect } from '../utils/connect'

import {
  decAction,
  subAction
} from '../store/actionCreators'

function About(props) {
  return (
    <div>
      <h1>About</h1>
      <h2>当前计数：{props.counter}</h2>
      {/* 在connect里面定义 */}
      <button onClick={() => { props.decrement() }}>-1</button>
      <button onClick={() => { props.subNumber(5) }}>-5</button>
    </div>
  )
}

// 赋值一个函数
const mapStateToProps = state => {
  return {
    // 从传入的参数获取
    counter: state.counter
  }
};
const mapDispatchProps = dispatch => {
  return {
    decrement() {
      dispatch(decAction())
    },
    subNumber(num) {
      dispatch(subAction(num))
    }
  }
};

// 这里就是将这个函数组件与对应的方法、状态联系起来
// 最终返回的是一个组件
export default connect(mapStateToProps, mapDispatchProps)(About)
